<!-- 已发通知页面 -->
<template>
  <el-card class="box-card" style="height: 100%">
    <template #header>
      <div class="message_header">
        <div>
          <img src="/src/assets/message.png" class="message_logo"/>
        </div>
        <div class="message_text">
          <span style="font-weight: bold; font-size: 20px;">已发通知</span>
        </div>
      </div>
    </template>
    <div class="message_message">
      <div v-for="(personal, index) in personals" :key="index" class="personal">
        <div class="personal_info">
          <div class="personal_detail">
            <p style="font-size: 16px;color:#81838F">{{ personal.name }} | {{ personal.sex }} | {{ personal.age }} 岁 </p>
          </div>
          <div class="personal_time">
            <p style="font-size: 16px;color:#81838F">{{ personal.time }}</p>
          </div>
        </div>
        <div class="ill_info">
          <p>{{ personal.message }}</p>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useDoctorInfo } from '/@/stores/doctorInfo';
import { sysMessage } from '/@/api/patient_doctor/patient_doctor';



interface PersonalInfo {
  sex: string;
  name: string;
  time: string;
  message: string;
  age: number;
}
const personals = ref<PersonalInfo[]>([]);
const state = useDoctorInfo();
const Uid =  state.doctorBaseInfo.doctorUid;
const fetchsysMessagerecent = async (Uid:string) => {
  try {
    const response = await sysMessage(Uid);
    /* console.log(response); */
    if (Array.isArray(response.data)) {
      personals.value = response.data.map(item => ({
        sex: item.sex,
        name: item.name,
        time: item.time,
        message: item.message,
        age: item.age
      }));
    } else {
      console.error('Unexpected data format:', response.data);
    }
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  fetchsysMessagerecent(Uid);
});

onActivated(() => {
  fetchsysMessagerecent(Uid);
});

/* const personals = ref([
  { name: '郭国庆', sex: '男', age: '54', time: '昨日17:30', ill_info:'血压异常频繁，请前来复诊' },
  { name: '黄美', sex: '女', age: '86', time: '昨日17:30', ill_info: '血压异常频繁，请前来复诊' },
  { name: '李华', sex: '男', age: '60', time: '昨日18:00', ill_info: '心率过低频繁，请前来复诊' },
  { name: '王丽', sex: '女', age: '75', time: '昨日18:00', ill_info: '血压异常频繁，请前来复诊' },
  { name: '张三', sex: '女', age: '1', time: '昨日17:30', ill_info:'血压异常频繁，请前来复诊' },
  { name: '李四', sex: '男', age: '2', time: '昨日17:30', ill_info: '血压异常频繁，请前来复诊' },
  { name: '张三', sex: '女', age: '1', time: '今日17:30', ill_info:'血压异常频繁，请前来复诊' },
  { name: '李四', sex: '男', age: '2', time: '今日17:30', ill_info: '血压异常频繁，请前来复诊' },
  { name: '张三', sex: '女', age: '1', time: '今日17:30', ill_info:'血压异常频繁，请前来复诊' },
  { name: '李四', sex: '男', age: '2', time: '今日17:30', ill_info: '血压异常频繁，请前来复诊' },

]); */
</script>

<style>
.message_header {
  display: flex;
  align-items: center;
}

.message_logo {
  margin-right: 10px;
  width: 40px;
  height: auto;
}

.message_message {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  margin-top:-5px;
}

/* 隐藏垂直滚动条 */
.message_message::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.personal{
  margin-top:5px;
}

.personal_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.personal_detail, .personal_time{
  display: flex;
  align-items: center;
}

.personal_detail {
  flex: 1;
}
.ill_info{
  margin-top: 1.5px;
}
</style>
